<template>
    <div>
        <!-- 顶部滑动条区域 -->
        <div id="slider" class="mui-slider">
			<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
				<div class="mui-scroll">
					<a :class="['mui-control-item',item.id == 0? 'mui-active':'']" href="javascript:;" v-for="item in list" :key='item.id' @click='change(item.id)'>
						{{item.name}}
					</a>
				</div>
			</div>
		</div>

        <div>
            <ul>
                <router-link :to="'/home/photos/'+index +'/'+(k+1)" v-for="(item,k) in picdir" :key='item.id' tag='li'>
                    <img :src="item.src" alt="">
                </router-link>
            </ul>
        </div>
    </div>
</template>

<script>
import mui from '../../lib/mui/dist/js/mui.js'

export default {
    data(){
        return {
            list: [{
                name: '全部',
                id: 0
            },{
                name: '风景',
                id: 1
            },{
                name: '人物',
                id: 2
            },{
                name: '汽车',
                id: 3
            },{
                name: '建筑',
                id: 4
            },{
                name: '运动',
                id: 5
            },{
                name: '艺术',
                id: 6
            }],
            index: 0,
            picdir:[],
            dupli:[
                { id:0, src:'./components/photos/0/0.png' },
                { id:1, src:'./components/photos/1/1.png' },
                { id:2, src:'./components/photos/2/2.png' },
                { id:3, src:'./components/photos/3/3.png' },
                { id:4, src:'./components/photos/4/4.png' },
                { id:5, src:'./components/photos/5/5.png' },
                { id:6, src:'./components/photos/6/6.png' },
                { id:7, src:'./components/photos/7/7.png' }
            ],
            jishu:0
        }
    },
    created(){
        this.picdir =JSON.parse(JSON.stringify(this.dupli))
        localStorage.setItem('photos'+this.index,JSON.stringify(this.picdir))
    },
    updated(){
        localStorage.setItem('photos'+this.index,JSON.stringify(this.picdir))
    },
    mounted(){
        //初始化滑动控件
        mui('.mui-scroll-wrapper').scroll({
	        deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
        });
    },
    methods:{
        change(picid){
            if (this.index == picid) return
            this.index = picid
            this.picdir =JSON.parse(JSON.stringify(this.dupli))
            for (var i=0 ; i != this.index ; i++){
                var el = this.picdir.shift()
                this.picdir.push(el)
            }
        },
        reset(){
            this.jishu += 1
            for (let i =0 ; i < 8 ; i++){
                if ( this.picdir[0].id != 0 ){
                    let el = this.picdir.shift()
                    this.picdir.push(el)
                }else{
                    return
                }
            }
        }
    },
    components:{
        
    },
    // router:{
    //     routes: [
    //         { path:'/home/photos', redirect:'/home/photos/0'}
    //         // { path:'/home/photos/:id', components: }
    //     ]
    // }
}
</script>

<style scoped>
/* touch-action: none */

ul {
    padding: 0;
}
li {
    list-style: none;
    padding: 0 0px;
    margin: 10px;
    border-radius: 13px;
    box-shadow: 5px 5px 5px #333 ;
    overflow: hidden;
}
div li img {
    width: 100%;
    margin: 0;
}
</style>